<template>
	<view class="content">
		<uamhead></uamhead>
		<view class="title">歌单</view>
		<scroll-view scroll-x="true">
		<view class="box">
			<view class="header">
				<view>
					<image :src="playList.coverImgUrl">
						<view class="iconfont iconyousanjiao Song">{{playList.playCount}}</view>
					</image>
				</view>
				<view class="left">
					<view>{{playList.name}}</view>
					<view>{{playList.description }}</view>
				</view>
			</view>

			<view class="iconfont iconbofang1 list_top">播放全部(共{{playList.trackCount }}首)</view>

			<view class="list_text" v-for="(item,index) in playList.tracks" :key="item.id" @tap="navPlayer(item.id)">
				<view class=" Song_index">{{index + 1}}</view>
			<view class="list_item">

				<view>{{item.name}}</view>
				<view>
					<image v-if="privileges[index].flag > 60 && privileges[index].flag"
						src="../../static/images/dujia.png" mode=""></image>
					<image v-if="privileges[index].maxbr == 999000" src="../../static/images/sq.png" mode="">
					</image>{{ item.ar[0].name }} - {{ item.name }}
				</view>
			</view>
			<view class="list_last iconfont iconbofang"></view>
		</view>
	</view>
	</scroll-view>
	</view>
</template>

<script>
	import { list } from "../../common/api.js"
	export default {
		name: "page",
		data() {
			return {
				title: '',
				playList: [],
				privileges: [],
				isShow: ""
			};
		},
		onLoad(options) {
			let listid = options.listid;
			list(listid).then((res) => {
				console.log('歌曲列表',res[1]);
				this.title = res[1].data.playlist.name;
				this.playList = res[1].data.playlist;
				this.privileges = res[1].data.privileges;
				this.isShow = true;
			});
		},
		methods: {
			navPlayer(id) {
				console.log(id)
				uni.navigateTo({
					url: '/components/index/player?songId='+ id
				})
			}
		}
	}
</script>

<style>
	.content .title {
		text-align: center;
		color: #797878;
		font-size: 40rpx;
		margin: 20rpx 0;
	}

	.box {
		margin: 0 50rpx;
	}

	.box .header {
		display: flex;
	}

	.box .header image {
		width: 300rpx;
		height: 300rpx;
		border-radius: 20rpx;
	}

	.box .header .Song {
		position: relative;
		left: 26rpx;
		top: -304rpx;
		color: #fff;
	}

	.box .header .left {
		color: #d8dfeb;
		font-size: 30rpx;
		line-height: 40rpx;
		margin-left: 44rpx;
	}

	.box .list_top {
		color: #1f1a22;
	}

	.box .list_text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 70rpx 0;
	}

	.box .list_text .Song_index {
		color: #a4acba;
	}

	.box .list_text .list_item {
		color: #615637;
		font-size: 24rpx;
	}

	.box .list_text .list_last {
		color: #e6ddd5;
	}

	.list_item image {
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}
</style>
